<template>
  <div class="uploadPic">
    <!-- 头部导航栏 -->
    <van-nav-bar
      style="background-color: #fff"
      title="上传相片"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 相册描述区 -->
    <div class="writeCon">
      <van-field
        v-model="pic_msg"
        rows="4"
        autosize
        type="textarea"
        placeholder="相册描述"
        class="field_con"
      />
    </div>
    <!-- 黑线 -->
    <div class="liner"></div>

    <!-- 选择 -->
    <div class="select">
      <van-row>
        <van-field
          readonly
          clickable
          label="上传到"
          :value="upload_value"
          placeholder="菲比相册·默认"
          @click="showUploadPicker = true"
        />
        <van-popup v-model="showUploadPicker" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columnsPath"
            @cancel="showUploadPicker = false"
            @confirm="onUploadConfirm"
          />
        </van-popup>
      </van-row>
      <van-row>
        <van-field
          readonly
          clickable
          label="相册权限"
          :value="power_value"
          placeholder="公开·默认"
          @click="showPowerPicker = true"
        />
        <van-popup v-model="showPowerPicker" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columnsPower"
            @cancel="showPowerPicker = false"
            @confirm="onPowerConfirm"
          />
        </van-popup>
      </van-row>
      <van-row>
        <van-col :span="20">
          <van-cell-group>
            <van-field v-model="title_value" placeholder="填写标签名称" />
          </van-cell-group>
        </van-col>
        <van-col :span="4">
          <van-button size="small" @click="addTip" style="margin-top: 2px"
            >添加</van-button
          >
        </van-col>
      </van-row>
      <van-row type="flex" gutter="20">
        <van-col v-for="(tip, i) in tipList" :key="i"
          ><van-tag
            closeable
            size="large"
            color="#eee"
            text-color="#000"
            @close="close(i)"
            >{{ tip }}</van-tag
          ></van-col
        >
      </van-row>
    </div>

    <!-- 选择相片 -->
    <div class="select_pic">
      <uploader @func="getPicUrl"></uploader>
    </div>

    <!-- 提交 -->
    <van-button color="#f1bf83" @click="btn_success" block>完成</van-button>
  </div>
</template>

<script>
import uploader from "../../components/common/uploader.vue";
export default {
  components: { uploader },
  data() {
    return {
      pic_url: "",
      //相片描述
      pic_msg: "",
      //选择相册的值
      upload_value: "",
      //相册权限值
      power_value: "",
      //是否展示pop
      showUploadPicker: false,
      showPowerPicker: false,
      //相册选择的范围
      columnsPath: ["菲比相册", "哈哈相册"],
      //相册公布的范围
      columnsPower: ["私密", "公开"],
      //标签内容
      title_value: "",
      //存储标签内容
      tipList: [],
      show: "",
      //存储的相册文件
      fileList: [],
      //通过该id或者相册名判断为哪个相册里面的相片
      pic_album_id: "",
    };
  },
  created() {
    this.album_id = this.$store.state.album_id;
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/album" });
    },
    onUploadConfirm(upload_value) {
      this.upload_value = upload_value;
      console.log(upload_value);
      this.showUploadPicker = false;
    },
    onPowerConfirm(power_value) {
      this.power_value = power_value;
      console.log(power_value);
      this.showPowerPicker = false;
    },
    addTip() {
      if (this.title_value != "") {
        this.tipList.push(this.title_value);
        this.title_value = "";
      } else {
        this.$toast("请输入内容!");
      }
    },
    close(i) {
      this.tipList.splice(i);
    },
    getPicUrl(data) {
      this.pic_url = data;
    },
    async btn_success() {
      //提交到七牛云
      const res = await this.request.post("/album/upload", {
        pic_url: this.pic_url,
        pic_des: this.pic_msg,
        album_id: this.album_id,
      });
      if (res.status != 0) {
        return this.$toast("上传失败");
      } else {
        this.$toast.success("上传成功");
        this.$router.push({ path: "/album" });
      }
    },
  },
};
</script>

<style lang="less" scopd>
.uploadPic {
  width: 750rpx;
  height: 100%;
  margin: 0 auto;
  .writeCon {
    /deep/.field_con .van-field__control {
      border: 2px solid #ccc;
      border-radius: 5px;
    }
  }
  .liner {
    width: 100%;
    height: 10px;
    background-color: #eee;
  }
  .select {
    width: 90%;
    height: 250px;
    margin: 0 auto;
  }
  .select_pic {
    margin-top: 30px;
    width: 80%;
    height: 100%;
    margin: 0 auto;
  }
}
</style>